
//画饼图
function draw_piechart(){
    
    d3.csv('data/csv/HR_comma_sep.csv').then(d=>{ 
        d.forEach(d => {
            d['satisfaction_level']= +(d['satisfaction_level'])
            d['last_evaluation']= +(d['last_evaluation'])
            d['average_montly_hours']= +(d['average_montly_hours'])
            d['time_spend_company']= +(d['time_spend_company'])
            d['Work_accident']= +(d['Work_accident'])
            d['promotion_last_5years']= +(d['promotion_last_5years'])
            d['left']= +(d['left'])
            d['number_project']= +(d['number_project'])
        });
        //console.log(d);
        var data = {};
        var sum=0;
        var cdata = {};

        if (isleft !=-1) {
            for(let i=d.length-1;i>=0;i--){
                if(d[i].left==(1-isleft)){
                    d.splice(i,1)
                }
            }
        }

        if(tableData.length == 0){
            for(let i=0;i<d.length;i++){
                let sales = d[i]['sales']
                if(d[i]['satisfaction_level']>=minSatis&&d[i]['satisfaction_level']<=maxSatis){
                    if(d[i]['last_evaluation']>=minEvalu&&d[i]['last_evaluation']<=maxEvalu){
                        if(d[i]['promotion_last_5years']==promotion&&d[i]['Work_accident']==waccident){
                            if(data[sales]==undefined){
                                data[sales]=0;
                            }
                            data[sales]++;
                            sum++;  
                            if(cdata[sales]==undefined){
                                cdata[sales]=[
                                    {'name':'未离职人员','color':'rgb(252,223,255)','num':0},
                                    {'name':'离职人员','color':'rgb(255,165,0)','num':0},
                                    {'sum1':0}
                                ]
                            } 
                            cdata[sales][d[i].left].num++;
                            cdata[sales][2].sum1++;                  
                        }else if(waccident==-1&&d[i]['promotion_last_5years']==promotion){
                            if(data[sales]==undefined){
                                data[sales]=0;
                            }
                            data[sales]++;
                            sum++;
                            if(cdata[sales]==undefined){
                                cdata[sales]=[
                                    {'name':'未离职人员','color':'rgb(252,223,255)','num':0},
                                    {'name':'离职人员','color':'rgb(255,165,0)','num':0},
                                    {'sum1':0}
                                ]
                            }
                            cdata[sales][d[i].left].num++;
                            cdata[sales][2].sum1++;    
                        }else if(promotion==-1&&d[i]['Work_accident']==waccident){
                            if(data[sales]==undefined){
                                data[sales]=0;
                            }
                            data[sales]++;
                            sum++; 
                            if(cdata[sales]==undefined){
                                cdata[sales]=[
                                    {'name':'未离职人员','color':'rgb(252,223,255)','num':0},
                                    {'name':'离职人员','color':'rgb(255,165,0)','num':0},
                                    {'sum1':0}
                                ]
                            } 
                            cdata[sales][d[i].left].num++;
                            cdata[sales][2].sum1++; 
                        }else if(promotion==-1&&waccident==-1){
                            if(data[sales]==undefined){
                                data[sales]=0;
                            }
                            data[sales]++;
                            sum++; 
                            if(cdata[sales]==undefined){
                                cdata[sales]=[
                                    {'name':'未离职人员','color':'rgb(252,223,255)','num':0},
                                    {'name':'离职人员','color':'rgb(255,165,0)','num':0},
                                    {'sum1':0}
                                ]
                            } 
                            cdata[sales][d[i].left].num++;
                            cdata[sales][2].sum1++;  
                        }
                    }
                }
            }
        }else{
            for(let i=0;i<tableData.length;i++){
                let sales = d[tableData[i]]['sales']
                if(data[sales]==undefined){
                    data[sales]=0;
                }
                data[sales]++;
                sum++;
                if(cdata[sales]==undefined){
                    cdata[sales]=[
                        {'name':'未离职人员','color':'rgb(252,223,255)','num':0},
                        {'name':'离职人员','color':'rgb(255,165,0)','num':0},
                        {'sum1':0}
                    ]
                }
                cdata[sales][d[tableData[i]].left].num++;
                cdata[sales][2].sum1++;  
            }
        }

        console.log(data)
        console.log(cdata);
        

        var conf = {
            width: 300,
            height: 280,
            margin:{
                top: 18,
                bottom: 10,
                left: 27,
                right: 20
            },
            innerRadius:0,
            outerRadius:120,
            fontsize:10,
        }
        
        var svg = d3.select('#piechart-svg')
        .attr('height',conf.height)
        .attr('width',conf.width)

        svg.selectAll('*').remove()

        //var scale = d3.scaleLinear.domain()
        var arc = d3.arc()
        var pie_g = svg.append('g').attr('id','pie-g')
            .attr('transform',`translate(${conf.outerRadius+conf.margin.left},${conf.outerRadius+conf.margin.top})`)
        var baseRadius=0;
        var k=Object.keys(data)
        var color = {
            "technical":'rgb(141,211,199)',
            "support":'rgb(255,255,179)',
            "sales":"rgb(190,186,218)",
            "product_mng":"rgb(251,128,114)",
            "marketing":"rgb(128,177,211)",
            "management":"rgb(253,180,98)",
            "hr":"rgb(179,222,105)",
            "accounting":"rgb(252,205,229)",
            "RandD":"rgb(217,217,217)",
            "IT":"rgb(188,128,189)",
        }
        k.sort()
        k.reverse()
        //console.log(k)
        //var delaytime=0,timer=0;
        var Maxleft = 0,Minleft = 1;
        for(let i=0;i<k.length;i++){
            Maxleft = Math.max(Maxleft,cdata[k[i]][1].num/cdata[k[i]][2].sum1)
            Minleft = Math.min(Minleft,cdata[k[i]][1].num/cdata[k[i]][2].sum1)
        }

        if(isleft == -1){
            var scale = d3.scaleLinear().domain([Minleft,Maxleft]).range([60,conf.outerRadius])
            for(let i=0;i<k.length;i++){
                //console.log(cdata[k[i]][1].num/cdata[k[i]][2].sum1)
                pie_g  //.append('g').attr('id',k[i])
                .append('path')
                .attr('d',function(){
                    let p=arc({
                        startAngle:baseRadius,
                        endAngle:baseRadius+2*Math.PI*data[k[i]]/sum,
                        innerRadius:conf.innerRadius,
                        outerRadius:scale(cdata[k[i]][1].num/cdata[k[i]][2].sum1)
                    })
                    //console.log(p);
                    baseRadius=baseRadius+2*Math.PI*data[k[i]]/sum;
                    return p;
                })
                .attr('fill',color[k[i]])
                //.attr('stroke','black')
                //.attr('stroke-width',1)
                .on('mousemove',function(){
                    let x = window.event.clientX+10;
                    let y = window.event.clientY+10;
                    var tooltip=d3.select('#tooltip')
                    .html(k[i]+"<br />"+(cdata[k[i]][1].num/cdata[k[i]][2].sum1*100).toFixed(2)+"%"+"<br />"+cdata[k[i]][1].num+"人")
                    //.html(k[i]+"<br />"+data[k[i]]+"人")
                    .style('position','absolute')
                    .style('left',x+'px')
                    .style('top',y+'px')
                    .style('color','white')
                    .style('font-size','20px')
                    //.style('opacity',1)
                    .style('background','grey')
                    .style('border','1px solid grey')
                    .style('border-radius','8px')
    
                    //console.log(this);
                    d3.select(this)
                    .attr('opacity',0.6)
                    .attr('stroke','grey')
                    .attr('stroke-width',3)
                })
                .on('mouseout',function(){
                    tooltip=d3.select('#tooltip')
                    .html('')
                    //.style('opacity',0)
    
                    d3.select(this)
                    .attr('opacity',1)
                    .attr('stroke','none')
                    
                    tooltip
                        .style('background','none')
                        .style('border','none')
                })
                .on('click',function(){
                    //console.log(i);
                    //d3.select('#piechart-svg').selectAll('*').remove()
                        //console.log(cdata)
                        //console.log(sum1);
                        baseRadius=0;
                        if(cdata[k[i]][2].sum1==0){
    
                        }else{
                            for(let j=0;j<2;j++){
                                pie_g  //.append('g').attr('id',k[i])
                                .append('path')
                                .attr('d',function(){
                                    let p=arc({
                                        startAngle:baseRadius,
                                        endAngle:baseRadius+2*Math.PI*cdata[k[i]][j].num/cdata[k[i]][2].sum1,
                                        innerRadius:conf.innerRadius,
                                        outerRadius:conf.outerRadius,
                                    })
                                    //console.log(p);
                                    baseRadius=baseRadius+2*Math.PI*cdata[k[i]][j].num/cdata[k[i]][2].sum1;
                                    return p;
                                })
                                .attr('fill',cdata[k[i]][j].color)
                                .on('mousemove',function(){
                                    let x = window.event.clientX+10;
                                    let y = window.event.clientY+10;
                                    tooltip//.html(cdata[i].name+'<br/>'+cdata[i].num+'人')
                                    .html(cdata[k[i]][j].name+'<br/>'+(cdata[k[i]][j].num/cdata[k[i]][2].sum1*100).toFixed(2)+'%'+'<br/>'+cdata[k[i]][j].num+'人')
                                    .style('position','absolute')
                                    .style('left',x+'px')
                                    .style('top',y+'px')
                                    .style('color','white')
                                    .style('font-size','18px')
                                    .style('caret-color','transparent')
    
                                    d3.select(this)
                                    .attr('stroke','grey')
                                    .attr('stroke-width',3)
                                })
                                .on('mouseout',function(){
                                    tooltip.html("")
                                    d3.select(this)
                                    .attr('opacity',1)
                                    .attr('stroke','none')
                                })
                                .on('click',function(){
                                    draw_piechart()
                                })
                                .attr('opacity',0)
                                .transition()
                                .duration(500)
                                .attr('opacity',1)
                            }
                        }
                    
                })
                .attr('opacity',0)
                .transition()
                .delay(100*i)
                .duration(200)  
                .attr('opacity',0.88)
            }
        }else{
            for(let i=0;i<k.length;i++){
                //console.log(cdata[k[i]][1].num/cdata[k[i]][2].sum1)
                pie_g  //.append('g').attr('id',k[i])
                .append('path')
                .attr('d',function(){
                    let p=arc({
                        startAngle:baseRadius,
                        endAngle:baseRadius+2*Math.PI*data[k[i]]/sum,
                        innerRadius:conf.innerRadius,
                        outerRadius:conf.outerRadius,
                    })
                    //console.log(p);
                    baseRadius=baseRadius+2*Math.PI*data[k[i]]/sum;
                    return p;
                })
                .attr('fill',color[k[i]])
                //.attr('stroke','black')
                //.attr('stroke-width',1)
                .on('mousemove',function(){
                    let x = window.event.clientX+10;
                    let y = window.event.clientY+10;
                    var tooltip=d3.select('#tooltip')
                    .html(k[i]+"<br />"+data[k[i]]+'人')
                    //.html(k[i]+"<br />"+data[k[i]]+"人")
                    .style('position','absolute')
                    .style('left',x+'px')
                    .style('top',y+'px')
                    .style('color','white')
                    .style('font-size','20px')
                    //.style('opacity',1)
                    .style('background','grey')
                    .style('border','1px solid grey')
                    .style('border-radius','8px')
    
                    //console.log(this);
                    d3.select(this)
                    .attr('opacity',0.6)
                    .attr('stroke','grey')
                    .attr('stroke-width',3)
                })
                .on('mouseout',function(){
                    tooltip=d3.select('#tooltip')
                    .html('')
                    //.style('opacity',0)
    
                    d3.select(this)
                    .attr('opacity',1)
                    .attr('stroke','none')
                    
                    tooltip
                        .style('background','none')
                        .style('border','none')
                })
                .on('click',function(){
                    //console.log(i);
                    //d3.select('#piechart-svg').selectAll('*').remove()
                        //console.log(cdata)
                        //console.log(sum1);
                        baseRadius=0;
                        if(cdata[k[i]][2].sum1==0){
    
                        }else{
                            for(let j=0;j<2;j++){
                                pie_g  //.append('g').attr('id',k[i])
                                .append('path')
                                .attr('d',function(){
                                    let p=arc({
                                        startAngle:baseRadius,
                                        endAngle:baseRadius+2*Math.PI*cdata[k[i]][j].num/cdata[k[i]][2].sum1,
                                        innerRadius:conf.innerRadius,
                                        outerRadius:conf.outerRadius,
                                    })
                                    //console.log(p);
                                    baseRadius=baseRadius+2*Math.PI*cdata[k[i]][j].num/cdata[k[i]][2].sum1;
                                    return p;
                                })
                                .attr('fill',cdata[k[i]][j].color)
                                .on('mousemove',function(){
                                    let x = window.event.clientX+10;
                                    let y = window.event.clientY+10;
                                    tooltip//.html(cdata[i].name+'<br/>'+cdata[i].num+'人')
                                    .html(cdata[k[i]][j].name+'<br/>'+(cdata[k[i]][j].num/cdata[k[i]][2].sum1*100).toFixed(2)+'%'+'<br/>'+cdata[k[i]][j].num+'人')
                                    .style('position','absolute')
                                    .style('left',x+'px')
                                    .style('top',y+'px')
                                    .style('color','white')
                                    .style('font-size','18px')
                                    .style('caret-color','transparent')
    
                                    d3.select(this)
                                    .attr('stroke','grey')
                                    .attr('stroke-width',3)
                                })
                                .on('mouseout',function(){
                                    tooltip.html("")
                                    d3.select(this)
                                    .attr('opacity',1)
                                    .attr('stroke','none')
                                })
                                .on('click',function(){
                                    draw_piechart()
                                })
                                .attr('opacity',0)
                                .transition()
                                .duration(500)
                                .attr('opacity',1)
                            }
                        }
                    
                })
                .attr('opacity',0)
                .transition()
                .delay(100*i)
                .duration(200)  
                .attr('opacity',0.88)
            }
        }
            
        // 画表头
        // svg.append('text')
        // .text('职工离职/未离职比例饼状图')
        // .attr('transform','translate(50,25)')
        // .attr('fill','#98F5FF')
        // .attr( "font-weight", "bold" )
    })
    
}
